<template>
  <div class="tool-use-cases">
    <h2 class="bar-title mb-6 break-words text-center">
      <span class="text-gray-1000 text-26 font-semibold break-words w-full">{{$t('detail_useCases',{toolName: toolName})}}</span>
    </h2>
    <div class="mt-12">
      <div class="tTable mx-auto">
        <table class=" table-fixed">
          <tbody>
            <tr v-for="(item, key) in use_cases"
              :key="`cases-${key}`">
              <td class="text-xl text-gray-1000 w-16 text-center">
                #{{key+1}}
              </td>
              <td class="text-xl text-gray-1000">
                {{item}}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ToolDetailUserCase',
  props: {
    tool: {
      type: Object,
      default: function () {
        return {}
      },
    },
    use_cases: {
      type: Array,
      default: () => [],
    },
    toolName: {
      type: String,
      default: '',
    },
  },
}
</script>
<style lang='scss' scoped>
.tool-use-cases {
  .tTable {
    background: #f7f5fe;
    border-radius: 6px;
    border: 1px solid #bfbfbf;
    width: 100%;
    max-width: 810px;
    table {
      width: 100%;
      tbody {
        tr {
          td {
            padding: 15px 20px;
            border: 0;
            border-bottom: 1px solid #bfbfbf;
            & + td {
              border-left: 1px solid #bfbfbf;
            }
            &:first-child {
              min-width: 60px;
              padding: 15px 10px;
            }
          }
          &:last-child {
            td {
              border-bottom: 0;
            }
          }
        }
      }
    }
  }
}
</style>